<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deepseek思维导图生成器</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --background-color: #f8f9fa;
            --text-color: #333;
            --border-color: #ddd;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
        }

        body {
            font-family: "Microsoft YaHei", "PingFang SC", "Source Sans Pro", sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            text-align: center;
            border-radius: 8px 8px 0 0;
            margin-bottom: 20px;
        }

        h1 {
            margin: 0;
            font-size: 2rem;
        }

        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .card-header {
            background-color: #f1f1f1;
            padding: 15px;
            font-weight: bold;
            border-bottom: 1px solid var(--border-color);
        }

        .card-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        textarea,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-family: inherit;
            box-sizing: border-box;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: var(--secondary-color);
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        .secondary-button {
            background-color: #6c757d;
        }

        .secondary-button:hover {
            background-color: #5a6268;
        }

        .tab-container {
            margin-top: 20px;
        }

        .tab-buttons {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .tab-button {
            padding: 10px 15px;
            cursor: pointer;
            background-color: #f1f1f1;
            border: none;
            outline: none;
            transition: 0.3s;
            font-size: 16px;
        }

        .tab-button:hover {
            background-color: #ddd;
        }

        .tab-button.active {
            background-color: var(--primary-color);
            color: white;
        }

        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-top: none;
        }

        .tab-content.active {
            display: block;
        }

        .subtab-buttons {
            display: flex;
            margin-top: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            flex-wrap: wrap;
        }

        .subtab-button {
            padding: 8px 12px;
            cursor: pointer;
            background-color: #f9f9f9;
            border: 1px solid #eee;
            border-bottom: none;
            margin-right: 5px;
            border-radius: 4px 4px 0 0;
            font-size: 14px;
        }

        .subtab-button:hover {
            background-color: #f1f1f1;
        }

        .subtab-button.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .subtab-content {
            display: none;
            padding: 15px;
            border: 1px solid #eee;
            border-top: none;
            margin-bottom: 15px;
        }

        .subtab-content.active {
            display: block;
        }

        #markdownEditor {
            width: 100%;
            min-height: 400px;
            border: 1px solid var(--border-color);
            padding: 15px;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            font-size: 14px;
            resize: vertical;
            border-radius: 4px;
            margin-top: 20px;
        }

        #mindmapContent {
            border: 1px solid var(--border-color);
            padding: 20px;
            margin-top: 20px;
            border-radius: 4px;
            background-color: white;
            min-height: 300px;
            overflow: auto;
        }

        .mermaid {
            text-align: center;
            margin-top: 20px;
        }

        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }

        code {
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }

        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .loading {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .hidden {
            display: none;
        }

        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-center {
            justify-content: center;
        }

        .text-center {
            text-align: center;
        }

        .mt-2 {
            margin-top: 0.5rem;
        }

        .mt-4 {
            margin-top: 1rem;
        }

        .p-2 {
            padding: 0.5rem;
        }

        /* 不同级别的标题样式 */
        .markdown-preview h1 {
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        .markdown-preview h2 {
            color: #3498db;
            margin-left: 20px;
        }

        .markdown-preview h3 {
            color: #9b59b6;
            margin-left: 40px;
        }

        .markdown-preview h4 {
            color: #16a085;
            margin-left: 60px;
        }

        .markdown-preview h5 {
            color: #f39c12;
            margin-left: 80px;
        }

        .markdown-preview h6 {
            color: #c0392b;
            margin-left: 100px;
        }

        .download-btn {
            background-color: var(--success-color);
            margin-right: 10px;
        }

        .download-btn:hover {
            background-color: #27ae60;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            margin-left: 5px;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        #colorTheme {
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
        }

        .style-selector {
            margin-bottom: 15px;
        }

        .progress-container {
            width: 100%;
            background-color: #f1f1f1;
            border-radius: 4px;
            margin-top: 10px;
            overflow: hidden;
        }

        .progress-bar {
            height: 20px;
            background-color: var(--primary-color);
            width: 0%;
            border-radius: 4px;
            text-align: center;
            line-height: 20px;
            color: white;
            transition: width 0.3s ease;
        }

        .mermaid-container {
            margin-top: 20px;
            padding: 15px;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.1);
        }

        /* 文件树样式 */
        .file-tree {
            margin: 20px 0;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }

        .file-tree ul {
            list-style-type: none;
            padding-left: 20px;
        }

        .file-tree li {
            position: relative;
            padding: 5px 0;
        }

        .file-tree li::before {
            content: '';
            position: absolute;
            left: -15px;
            top: 12px;
            width: 10px;
            height: 1px;
            background-color: #999;
        }

        .file-tree li::after {
            content: '';
            position: absolute;
            left: -15px;
            top: 0;
            height: 100%;
            width: 1px;
            background-color: #999;
        }

        .file-tree li:last-child::after {
            height: 12px;
        }

        .file-tree .folder {
            color: var(--primary-color);
            font-weight: bold;
        }

        .file-tree .file {
            color: var(--text-color);
        }

        .update-button {
            background-color: var(--warning-color);
            margin-right: 10px;
        }

        .update-button:hover {
            background-color: #e67e22;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Deepseek思维导图生成器</h1>
            <p>基于Deepseek大模型生成思维导图的简易工具</p>
        </header>

        <div class="card">
            <div class="card-header">配置信息</div>
            <div class="card-body">
                <div class="form-group">
                    <label for="apiKey">API Key 
                        <span class="tooltip">
                            <i class="fas fa-question-circle"></i>
                            <span class="tooltiptext">您的Deepseek API密钥</span>
                        </span>
                    </label>
                    <input type="text" id="apiKey" placeholder="输入您的Deepseek API Key" value="DEEPSEEK_API_KEY">
                </div>
                <div class="form-group">
                    <label for="apiEndpoint">API接口地址</label>
                    <input type="text" id="apiEndpoint" value="https://ark.cn-beijing.volces.com/api/v3/chat/completions">
                </div>
                <div class="form-group">
                    <label for="modelName">模型选择</label>
                    <select id="modelName">
                        <option value="ep-20250218210050-425rf" selected>Deepseek-R1</option>
                        <option value="Deepseek-v3">Deepseek V3</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="temperature">温度 (创造性) 
                        <span class="tooltip">
                            <i class="fas fa-question-circle"></i>
                            <span class="tooltiptext">较高的值会产生更有创意但可能不太连贯的结果</span>
                        </span>
                    </label>
                    <input type="range" id="temperature" min="0.1" max="2.0" step="0.1" value="1.5">
                    <span id="temperatureValue">1.5</span>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">思维导图生成</div>
            <div class="card-body">
                <div class="form-group">
                    <label for="theme">思维导图主题</label>
                    <input type="text" id="theme" placeholder="输入思维导图的主题，例如：人工智能技术">
                </div>
                <div class="form-group">
                    <label for="depth">层级深度 
                        <span class="tooltip">
                            <i class="fas fa-question-circle"></i>
                            <span class="tooltiptext">思维导图的层级深度，建议2-4级</span>
                        </span>
                    </label>
                    <select id="depth">
                        <option value="2">2级</option>
                        <option value="3" selected>3级</option>
                        <option value="4">4级</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="colorTheme">色彩主题</label>
                    <select id="colorTheme">
                        <option value="default">默认蓝色</option>
                        <option value="pastel">柔和色调</option>
                        <option value="forest">森林绿色</option>
                        <option value="sunset">日落暖色</option>
                        <option value="monochrome">单色调</option>
                    </select>
                </div>
                <button id="generateBtn">生成思维导图</button>
                <div id="progressContainer" class="progress-container hidden">
                    <div id="progressBar" class="progress-bar">0%</div>
                </div>
                <div id="statusContainer" class="status hidden"></div>
            </div>
        </div>

        <div class="tab-container">
            <div class="tab-buttons">
                <button class="tab-button active" onclick="openTab(event, 'mdTab')">Markdown</button>
                <button class="tab-button" onclick="openTab(event, 'fileTreeTab')">文件树</button>
                <button class="tab-button" onclick="openTab(event, 'mermaidTab')">Mermaid</button>
            </div>

            <!-- Markdown标签页 -->
            <div id="mdTab" class="tab-content active">
                <div class="button-group">
                    <button class="download-btn" id="downloadMdBtn"><i class="fas fa-download"></i> 下载MD文件</button>
                    <button class="secondary-button" id="copyMdBtn"><i class="fas fa-copy"></i> 复制Markdown</button>
                    <button class="update-button" id="updateFromEditorBtn"><i class="fas fa-sync-alt"></i> 更新思维导图</button>
                </div>
                <div id="mindmapContent" class="markdown-preview"></div>
                <label for="markdownEditor" class="mt-4">编辑Markdown内容:</label>
                <textarea id="markdownEditor"></textarea>
            </div>

            <!-- 文件树标签页 -->
            <div id="fileTreeTab" class="tab-content">
                <div class="button-group">
                    <button class="download-btn" id="downloadFileTreeBtn"><i class="fas fa-download"></i> 下载文件树</button>
                    <button class="secondary-button" id="copyFileTreeBtn"><i class="fas fa-copy"></i> 复制文件树</button>
                </div>
                <div id="fileTreeContent" class="file-tree"></div>
            </div>

            <!-- Mermaid标签页 -->
            <div id="mermaidTab" class="tab-content">
                <div class="subtab-buttons">
                    <button class="subtab-button active" onclick="openSubTab(event, 'mermaid', 'treeTab')">树型图</button>
                    <button class="subtab-button" onclick="openSubTab(event, 'mermaid', 'flowTab')">逻辑图</button>
                    <button class="subtab-button" onclick="openSubTab(event, 'mermaid', 'mindmapTab')">思维导图</button>
                </div>

                <!-- Mermaid树型图子标签页 -->
                <div id="mermaidTreeTab" class="subtab-content active">
                    <div class="button-group">
                        <button class="download-btn" id="downloadMermaidTreeBtn"><i class="fas fa-download"></i> 下载Mermaid文件</button>
                        <button class="secondary-button" id="copyMermaidTreeBtn"><i class="fas fa-copy"></i> 复制Mermaid代码</button>
                    </div>
                    <pre id="mermaidTreeCode" style="margin-bottom: 20px;"></pre>
                    <div id="mermaidTreeContent" class="mermaid-container"></div>
                </div>

                <!-- Mermaid逻辑图子标签页 -->
                <div id="mermaidFlowTab" class="subtab-content">
                    <div class="button-group">
                        <button class="download-btn" id="downloadMermaidFlowBtn"><i class="fas fa-download"></i> 下载Mermaid文件</button>
                        <button class="secondary-button" id="copyMermaidFlowBtn"><i class="fas fa-copy"></i> 复制Mermaid代码</button>
                    </div>
                    <pre id="mermaidFlowCode" style="margin-bottom: 20px;"></pre>
                    <div id="mermaidFlowContent" class="mermaid-container"></div>
                </div>

                <!-- Mermaid思维导图子标签页 -->
                <div id="mermaidMindmapTab" class="subtab-content">
                    <div class="button-group">
                        <button class="download-btn" id="downloadMermaidMindmapBtn"><i class="fas fa-download"></i> 下载Mermaid文件</button>
                        <button class="secondary-button" id="copyMermaidMindmapBtn"><i class="fas fa-copy"></i> 复制Mermaid代码</button>
                    </div>
                    <pre id="mermaidMindmapCode" style="margin-bottom: 20px;"></pre>
                    <div id="mermaidMindmapContent" class="mermaid-container"></div>
                </div>
            </div>
        </div>
    </div>

    <footer class="card mt-4 p-2 text-center">
        <p>Deepseek思维导图生成器 &copy; 2025</p>
    </footer>

    <script>
        // 初始化Mermaid
        mermaid.initialize({ 
            startOnLoad: false, 
            theme: 'default',
            securityLevel: 'loose'
        });
        
        // 获取DOM元素
        const apiKeyInput = document.getElementById('apiKey');
        const apiEndpointInput = document.getElementById('apiEndpoint');
        const modelNameSelect = document.getElementById('modelName');
        const temperatureInput = document.getElementById('temperature');
        const temperatureValue = document.getElementById('temperatureValue');
        const themeInput = document.getElementById('theme');
        const depthSelect = document.getElementById('depth');
        const colorThemeSelect = document.getElementById('colorTheme');
        const generateBtn = document.getElementById('generateBtn');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const statusContainer = document.getElementById('statusContainer');
        const mindmapContent = document.getElementById('mindmapContent');
        const markdownEditor = document.getElementById('markdownEditor');
        const updateFromEditorBtn = document.getElementById('updateFromEditorBtn');
        
        // 文件树
        const fileTreeContent = document.getElementById('fileTreeContent');
        
        // Mermaid树形图
        const mermaidTreeContent = document.getElementById('mermaidTreeContent');
        const mermaidTreeCode = document.getElementById('mermaidTreeCode');
        
        // Mermaid流程图
        const mermaidFlowContent = document.getElementById('mermaidFlowContent');
        const mermaidFlowCode = document.getElementById('mermaidFlowCode');
        
        // Mermaid思维导图
        const mermaidMindmapContent = document.getElementById('mermaidMindmapContent');
        const mermaidMindmapCode = document.getElementById('mermaidMindmapCode');
        
        // 下载按钮
        const downloadMdBtn = document.getElementById('downloadMdBtn');
        const downloadFileTreeBtn = document.getElementById('downloadFileTreeBtn');
        const downloadMermaidTreeBtn = document.getElementById('downloadMermaidTreeBtn');
        const downloadMermaidFlowBtn = document.getElementById('downloadMermaidFlowBtn');
        const downloadMermaidMindmapBtn = document.getElementById('downloadMermaidMindmapBtn');
        
        // 复制按钮
        const copyMdBtn = document.getElementById('copyMdBtn');
        const copyFileTreeBtn = document.getElementById('copyFileTreeBtn');
        const copyMermaidTreeBtn = document.getElementById('copyMermaidTreeBtn');
        const copyMermaidFlowBtn = document.getElementById('copyMermaidFlowBtn');
        const copyMermaidMindmapBtn = document.getElementById('copyMermaidMindmapBtn');
        
        // 存储生成的数据
        let generatedData = {
            markdown: '',
            fileTree: '',
            mermaidTree: '',
            mermaidFlow: '',
            mermaidMindmap: '',
            nodes: []  // 用于存储解析后的节点数据，便于生成不同格式
        };
        
        // 更新温度值显示
        temperatureInput.addEventListener('input', function() {
            temperatureValue.textContent = this.value;
        });
        
        // 切换主标签页
        function openTab(evt, tabName) {
            const tabContent = document.getElementsByClassName('tab-content');
            for (let i = 0; i < tabContent.length; i++) {
                tabContent[i].classList.remove('active');
            }
            
            const tabButtons = document.getElementsByClassName('tab-button');
            for (let i = 0; i < tabButtons.length; i++) {
                tabButtons[i].classList.remove('active');
            }
            
            document.getElementById(tabName).classList.add('active');
            evt.currentTarget.classList.add('active');
            
            // 根据不同标签页执行特定操作
            if (tabName === 'mermaidTab') {
                // 查找当前活跃的子标签页
                const activeSubtab = document.querySelector('#mermaidTab .subtab-content.active');
                if (activeSubtab) {
                    const subtabId = activeSubtab.id;
                    if (subtabId === 'mermaidTreeTab' && generatedData.mermaidTree) {
                        renderMermaidDiagram('tree');
                    } else if (subtabId === 'mermaidFlowTab' && generatedData.mermaidFlow) {
                        renderMermaidDiagram('flow');
                    } else if (subtabId === 'mermaidMindmapTab' && generatedData.mermaidMindmap) {
                        renderMermaidDiagram('mindmap');
                    }
                }
            } else if (tabName === 'fileTreeTab' && generatedData.nodes.length > 0) {
                renderFileTree();
            }
        }
        
        // 切换子标签页
        function openSubTab(evt, parentTabName, subTabName) {
            // 确定完整的子标签页ID
            const fullSubTabId = parentTabName + subTabName.charAt(0).toUpperCase() + subTabName.slice(1);
            
            // 隐藏所有子标签页内容
            const subtabContents = document.querySelectorAll(`#${parentTabName}Tab .subtab-content`);
            for (let i = 0; i < subtabContents.length; i++) {
                subtabContents[i].classList.remove('active');
            }
            
            // 取消激活所有子标签按钮
            const subtabButtons = document.querySelectorAll(`#${parentTabName}Tab .subtab-button`);
            for (let i = 0; i < subtabButtons.length; i++) {
                subtabButtons[i].classList.remove('active');
            }
            
            // 激活所选子标签页和按钮
            document.getElementById(fullSubTabId).classList.add('active');
            evt.currentTarget.classList.add('active');
            
            // 特定子标签页的操作
            if (parentTabName === 'mermaid') {
                if (subTabName === 'treeTab' && generatedData.mermaidTree) {
                    renderMermaidDiagram('tree');
                } else if (subTabName === 'flowTab' && generatedData.mermaidFlow) {
                    renderMermaidDiagram('flow');
                } else if (subTabName === 'mindmapTab' && generatedData.mermaidMindmap) {
                    renderMermaidDiagram('mindmap');
                }
            }
        }
        
        // 从编辑器更新思维导图
        updateFromEditorBtn.addEventListener('click', function() {
            const markdown = markdownEditor.value.trim();
            if (!markdown) {
                showStatus('请先输入Markdown内容', 'error');
                return;
            }
            
            try {
                // 更新markdown数据
                generatedData.markdown = markdown;
                
                // 更新HTML预览
                mindmapContent.innerHTML = marked.parse(markdown);
                
                // 重新解析节点结构
                generatedData.nodes = parseMarkdownToNodes(markdown);
                
                // 重新生成各种图表
                generatedData.mermaidTree = generateMermaidTreeDiagram(generatedData.nodes);
                mermaidTreeCode.textContent = generatedData.mermaidTree;
                
                generatedData.mermaidFlow = generateMermaidFlowDiagram(generatedData.nodes);
                mermaidFlowCode.textContent = generatedData.mermaidFlow;
                
                generatedData.mermaidMindmap = generateMermaidMindmap(generatedData.nodes);
                mermaidMindmapCode.textContent = generatedData.mermaidMindmap;
                
                // 重新生成并渲染文件树
                generatedData.fileTree = generateFileTree(generatedData.nodes);
                renderFileTree();
                
                // 重新渲染当前活跃的Mermaid图表
                const activeSubtab = document.querySelector('#mermaidTab .subtab-content.active');
                if (activeSubtab) {
                    const subtabId = activeSubtab.id;
                    if (subtabId === 'mermaidTreeTab') {
                        renderMermaidDiagram('tree');
                    } else if (subtabId === 'mermaidFlowTab') {
                        renderMermaidDiagram('flow');
                    } else if (subtabId === 'mermaidMindmapTab') {
                        renderMermaidDiagram('mindmap');
                    }
                }
                
                showStatus('思维导图已更新！', 'success');
            } catch (error) {
                console.error('更新思维导图时出错:', error);
                showStatus(`更新思维导图时出错: ${error.message}`, 'error');
            }
        });
        
        // 生成思维导图
        generateBtn.addEventListener('click', async function() {
            // 验证输入
            if (!themeInput.value.trim()) {
                showStatus('请输入思维导图主题', 'error');
                return;
            }
            
            if (!apiKeyInput.value.trim()) {
                showStatus('请输入API Key', 'error');
                return;
            }
            
            // 显示加载状态和进度条
            progressContainer.classList.remove('hidden');
            progressBar.style.width = '5%';
            progressBar.textContent = '5%';
            
            showStatus('正在生成思维导图，请稍候...', 'loading');
            generateBtn.disabled = true;
            
            try {
                // 更新进度
                updateProgress(10, '正在准备请求...');
                
                // 构建提示词
                const prompt = `请根据「${themeInput.value}」，要求遵守MECE原则，并且深度要${depthSelect.value}级的，生成一个MD格式的思维导图`;
                
                // 更新进度
                updateProgress(20, '正在发送API请求...');
                
                // 构建API请求
                const response = await fetch(apiEndpointInput.value, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKeyInput.value}`
                    },
                    body: JSON.stringify({
                        model: modelNameSelect.value,
                        messages: [
                            { role: 'user', content: prompt }
                        ],
                        temperature: parseFloat(temperatureInput.value),
                        max_tokens: 4000
                    })
                });
                
                // 更新进度
                updateProgress(60, '收到API响应，正在处理数据...');
                
                if (!response.ok) {
                    throw new Error(`API响应错误: ${response.status} ${response.statusText}`);
                }
                
                const data = await response.json();
                
                // 更新进度
                updateProgress(70, '解析Markdown内容...');
                
                // 提取Markdown内容
                const markdown = data.choices[0].message.content;
                generatedData.markdown = markdown;
                
                // 填充编辑器
                markdownEditor.value = markdown;
                
                // 将Markdown转换为HTML
                mindmapContent.innerHTML = marked.parse(markdown);
                
                // 更新进度
                updateProgress(75, '解析节点结构...');
                
                // 解析节点结构
                generatedData.nodes = parseMarkdownToNodes(markdown);
                
                // 更新进度
                updateProgress(80, '生成Mermaid树型图...');
                
                // 生成各种格式的图表代码
                generatedData.mermaidTree = generateMermaidTreeDiagram(generatedData.nodes);
                mermaidTreeCode.textContent = generatedData.mermaidTree;
                
                // 更新进度
                updateProgress(82, '生成Mermaid逻辑图...');
                
                generatedData.mermaidFlow = generateMermaidFlowDiagram(generatedData.nodes);
                mermaidFlowCode.textContent = generatedData.mermaidFlow;
                
                // 更新进度
                updateProgress(85, '生成Mermaid思维导图...');
                
                generatedData.mermaidMindmap = generateMermaidMindmap(generatedData.nodes);
                mermaidMindmapCode.textContent = generatedData.mermaidMindmap;
                
                // 更新进度
                updateProgress(88, '生成文件树...');
                
                // 生成文件树
                generatedData.fileTree = generateFileTree(generatedData.nodes);
                renderFileTree();
                
                // 更新进度
                updateProgress(90, '渲染Mermaid图表...');
                
                // 渲染Mermaid图表
                renderMermaidDiagram('tree');
                
                // 更新进度
                updateProgress(100, '完成!');
                
                // 显示成功状态
                showStatus('思维导图生成成功！', 'success');
                
                // 隐藏进度条
                setTimeout(() => {
                    progressContainer.classList.add('hidden');
                }, 1000);
                
            } catch (error) {
                console.error('Error:', error);
                showStatus(`生成思维导图时出错: ${error.message}`, 'error');
                
                // 错误时隐藏进度条
                progressContainer.classList.add('hidden');
            } finally {
                generateBtn.disabled = false;
            }
        });
        
        // 更新进度条
        function updateProgress(percent, message) {
            progressBar.style.width = `${percent}%`;
            progressBar.textContent = `${percent}% ${message || ''}`;
        }
        
        // 渲染Mermaid图表
        function renderMermaidDiagram(type) {
            try {
                let content;
                let mermaidContent;
                
                if (type === 'tree') {
                    content = generatedData.mermaidTree;
                    mermaidContent = mermaidTreeContent;
                } else if (type === 'flow') {
                    content = generatedData.mermaidFlow;
                    mermaidContent = mermaidFlowContent;
                } else if (type === 'mindmap') {
                    content = generatedData.mermaidMindmap;
                    mermaidContent = mermaidMindmapContent;
                }
                
                // 清空之前的内容
                mermaidContent.innerHTML = '';
                
                // 如果没有mermaid内容，不执行渲染
                if (!content) {
                    mermaidContent.innerHTML = '<div class="error">没有可用的Mermaid内容</div>';
                    return;
                }
                
                // 创建新的div并添加mermaid类
                const mermaidDiv = document.createElement('div');
                mermaidDiv.className = 'mermaid';
                mermaidDiv.textContent = content;
                
                // 添加到容器
                mermaidContent.appendChild(mermaidDiv);
                
                // 重新初始化mermaid
                mermaid.init(undefined, '.mermaid');
            } catch (error) {
                console.error('Mermaid渲染错误:', error);
                if (type === 'tree') {
                    mermaidTreeContent.innerHTML = `<div class="error">Mermaid图表渲染失败: ${error.message}</div>`;
                } else if (type === 'flow') {
                    mermaidFlowContent.innerHTML = `<div class="error">Mermaid图表渲染失败: ${error.message}</div>`;
                } else if (type === 'mindmap') {
                    mermaidMindmapContent.innerHTML = `<div class="error">Mermaid图表渲染失败: ${error.message}</div>`;
                }
            }
        }
        
        // 从Markdown解析节点结构
        function parseMarkdownToNodes(markdown) {
            // 解析Markdown标题
            const lines = markdown.split('\n');
            const nodes = [];
            
            // 提取标题节点
            for (const line of lines) {
                const trimmedLine = line.trim();
                if (trimmedLine.startsWith('#')) {
                    // 计算标题级别
                    let level = 0;
                    for (const char of trimmedLine) {
                        if (char === '#') {
                            level++;
                        } else {
                            break;
                        }
                    }
                    
                    // 提取标题内容
                    const content = trimmedLine.substring(level).trim();
                    if (content) {
                        nodes.push({ level, content, id: `node_${nodes.length}` });
                    }
                }
            }
            
            // 构建父子关系
            for (let i = 1; i < nodes.length; i++) {
                const node = nodes[i];
                
                // 找到父节点
                for (let j = i - 1; j >= 0; j--) {
                    if (nodes[j].level < node.level) {
                        if (!nodes[j].children) {
                            nodes[j].children = [];
                        }
                        nodes[j].children.push(node);
                        node.parent = nodes[j];
                        break;
                    }
                }
            }
            
            return nodes;
        }
        
        // 生成Mermaid树型图
        function generateMermaidTreeDiagram(nodes) {
            if (nodes.length === 0) return '';
            
            try {
                let mermaidCode = 'graph TD\n';
                
                // 添加所有节点
                for (const node of nodes) {
                    const nodeId = node.id;
                    
                    // 根据级别选择不同的节点形状
                    let nodeShape;
                    if (node.level === 1) {
                        nodeShape = '["{0}"]';  // 根节点方形
                    } else if (node.level === 2) {
                        nodeShape = '["{0}"]';  // 二级节点方形
                    } else if (node.level === 3) {
                        nodeShape = '("{0}")';  // 三级节点圆形
                    } else {
                        nodeShape = '{"{0}"}';  // 四级及以上菱形
                    }
                    
                    // 添加节点定义
                    mermaidCode += `    ${nodeId}${nodeShape.replace("{0}", escapeMermaidText(node.content))}\n`;
                }
                
                // 添加连接线
                for (let i = 1; i < nodes.length; i++) {
                    const node = nodes[i];
                    if (node.parent) {
                        mermaidCode += `    ${node.parent.id} --> ${node.id}\n`;
                    }
                }
                
                return mermaidCode;
            } catch (error) {
                console.error('生成Mermaid树型图错误:', error);
                return `graph TD\n    root["生成失败: ${error.message}"]`;
            }
        }
        
        // 生成Mermaid流程图 (逻辑图)
        function generateMermaidFlowDiagram(nodes) {
            if (nodes.length === 0) return '';
            
            try {
                let mermaidCode = 'flowchart LR\n';
                
                // 添加样式定义，让节点更有层次感
                mermaidCode += '    %% 样式定义\n';
                mermaidCode += '    classDef root fill:#f96,stroke:#333,stroke-width:2px;\n';
                mermaidCode += '    classDef level2 fill:#9cf,stroke:#333,stroke-width:1px;\n';
                mermaidCode += '    classDef level3 fill:#cfc,stroke:#333,stroke-width:1px;\n';
                mermaidCode += '    classDef level4 fill:#fcf,stroke:#333,stroke-width:1px;\n';
                mermaidCode += '\n';
                
                // 添加所有节点
                for (const node of nodes) {
                    const nodeId = node.id;
                    
                    // 根据级别选择不同的节点形状
                    let nodeShape;
                    if (node.level === 1) {
                        nodeShape = '(["{0}"])';  // 根节点圆角
                    } else if (node.level === 2) {
                        nodeShape = '["{0}"]';    // 二级节点方形
                    } else if (node.level === 3) {
                        nodeShape = '{{"{0}"}}';  // 三级节点六边形
                    } else {
                        nodeShape = '>"{0}"]';   // 四级及以上旗帜形
                    }
                    
                    // 添加节点定义
                    mermaidCode += `    ${nodeId}${nodeShape.replace("{0}", escapeMermaidText(node.content))}\n`;
                }
                
                // 添加连接线
                for (let i = 1; i < nodes.length; i++) {
                    const node = nodes[i];
                    if (node.parent) {
                        mermaidCode += `    ${node.parent.id} -->|${node.level - 1}| ${node.id}\n`;
                    }
                }
                
                // 应用样式
                mermaidCode += '\n    %% 应用样式\n';
                for (const node of nodes) {
                    if (node.level === 1) {
                        mermaidCode += `    class ${node.id} root;\n`;
                    } else if (node.level === 2) {
                        mermaidCode += `    class ${node.id} level2;\n`;
                    } else if (node.level === 3) {
                        mermaidCode += `    class ${node.id} level3;\n`;
                    } else if (node.level >= 4) {
                        mermaidCode += `    class ${node.id} level4;\n`;
                    }
                }
                
                return mermaidCode;
            } catch (error) {
                console.error('生成Mermaid流程图错误:', error);
                return `flowchart LR\n    root["生成失败: ${error.message}"]`;
            }
        }
        
        // 生成Mermaid思维导图 - 使用更稳定的语法，左右布局
        function generateMermaidMindmap(nodes) {
            if (nodes.length === 0) return '';
            
            try {
                // 使用graph LR作为基础语法
                let mermaidCode = `graph LR\n`;
                
                // 设置节点样式类
                mermaidCode += `    %% 样式定义\n`;
                mermaidCode += `    classDef root fill:#f96,stroke:#333,stroke-width:2px;\n`;
                mermaidCode += `    classDef leftNode fill:#9cf,stroke:#333,stroke-width:1px;\n`;
                mermaidCode += `    classDef rightNode fill:#fcf,stroke:#333,stroke-width:1px;\n`;
                mermaidCode += `\n`;
                
                // 添加所有节点
                mermaidCode += `    %% 节点定义\n`;
                for (const node of nodes) {
                    const nodeId = node.id;
                    // 使用方括号形状，避免解析问题
                    mermaidCode += `    ${nodeId}["${escapeMermaidText(node.content)}"]\n`;
                }
                
                // 获取根节点
                if (nodes.length > 0) {
                    const rootNode = nodes[0];
                    
                    // 如果根节点有子节点，分成左右两边
                    if (rootNode.children && rootNode.children.length > 0) {
                        const children = rootNode.children;
                        const middleIndex = Math.ceil(children.length / 2);
                        
                        mermaidCode += `\n    %% 连接线定义\n`;
                        
                        // 左侧连接
                        for (let i = 0; i < middleIndex; i++) {
                            const child = children[i];
                            // 使用 --- 而不是 --> 确保没有箭头
                            mermaidCode += `    ${rootNode.id} --- ${child.id}\n`;
                            
                            // 递归处理子节点
                            mermaidCode += processChildConnections(child);
                        }
                        
                        // 右侧连接
                        for (let i = middleIndex; i < children.length; i++) {
                            const child = children[i];
                            mermaidCode += `    ${rootNode.id} --- ${child.id}\n`;
                            
                            // 递归处理子节点
                            mermaidCode += processChildConnections(child);
                        }
                        
                        // 应用样式
                        mermaidCode += `\n    %% 应用样式\n`;
                        mermaidCode += `    class ${rootNode.id} root;\n`;
                        
                        // 左侧样式
                        for (let i = 0; i < middleIndex; i++) {
                            applyStyleRecursive(children[i], 'leftNode', mermaidCode);
                        }
                        
                        // 右侧样式
                        for (let i = middleIndex; i < children.length; i++) {
                            applyStyleRecursive(children[i], 'rightNode', mermaidCode);
                        }
                    }
                }
                
                return mermaidCode;
            } catch (error) {
                console.error('生成Mermaid思维导图错误:', error);
                return `graph LR\n    root["生成失败: ${error.message}"]`;
            }
        }
        
        // 帮助函数：处理子节点连接
        function processChildConnections(node) {
            let connections = '';
            if (node.children && node.children.length > 0) {
                for (const child of node.children) {
                    connections += `    ${node.id} --- ${child.id}\n`;
                    connections += processChildConnections(child);
                }
            }
            return connections;
        }
        
        // 帮助函数：递归应用样式
        function applyStyleRecursive(node, styleClass, mermaidCode) {
            mermaidCode += `    class ${node.id} ${styleClass};\n`;
            if (node.children && node.children.length > 0) {
                for (const child of node.children) {
                    applyStyleRecursive(child, styleClass, mermaidCode);
                }
            }
            return mermaidCode;
        }
        
        // 生成文件树
        function generateFileTree(nodes) {
            if (nodes.length === 0) return '';
            
            try {
                // 构造文件树HTML
                let html = '<ul class="file-tree-root">\n';
                
                // 添加根节点
                if (nodes.length > 0) {
                    const rootNode = nodes[0];
                    html += `  <li><span class="folder">${escapeHtml(rootNode.content)}</span>\n`;
                    
                    // 递归添加子节点
                    if (rootNode.children && rootNode.children.length > 0) {
                        html += '    <ul>\n';
                        for (const child of rootNode.children) {
                            html += generateFileTreeNode(child, 6);
                        }
                        html += '    </ul>\n';
                    }
                    
                    html += '  </li>\n';
                }
                
                html += '</ul>';
                
                return html;
            } catch (error) {
                console.error('生成文件树错误:', error);
                return `<div class="error">生成文件树失败: ${error.message}</div>`;
            }
        }
        
        // 递归生成文件树节点
        function generateFileTreeNode(node, indent) {
            const spacing = ' '.repeat(indent);
            let html = `${spacing}<li>`;
            
            // 根据级别决定是文件夹还是文件
            if (node.children && node.children.length > 0) {
                html += `<span class="folder">${escapeHtml(node.content)}</span>\n`;
                html += `${spacing}  <ul>\n`;
                
                for (const child of node.children) {
                    html += generateFileTreeNode(child, indent + 4);
                }
                
                html += `${spacing}  </ul>\n`;
            } else {
                html += `<span class="file">${escapeHtml(node.content)}</span>`;
            }
            
            html += `</li>\n`;
            return html;
        }
        
        // 渲染文件树
        function renderFileTree() {
            if (!generatedData.fileTree) {
                generatedData.fileTree = generateFileTree(generatedData.nodes);
            }
            
            fileTreeContent.innerHTML = generatedData.fileTree;
        }
        
        // 转义Mermaid文本中的特殊字符
        function escapeMermaidText(text) {
            // 简化转义，确保基本字符安全
            return text
                .replace(/"/g, "'") // 替换双引号为单引号
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }
        
        // 转义HTML
        function escapeHtml(text) {
            return text
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }
        
        // 显示状态信息
        function showStatus(message, type) {
            statusContainer.className = 'status ' + type;
            
            if (type === 'loading') {
                statusContainer.innerHTML = '<div class="loading-spinner"></div>' + message;
            } else {
                statusContainer.textContent = message;
            }
            
            statusContainer.classList.remove('hidden');
            
            // 如果是成功或错误消息，设置定时器3秒后隐藏
            if (type === 'success' || type === 'error') {
                setTimeout(() => {
                    statusContainer.classList.add('hidden');
                }, 3000);
            }
        }
        
        // 下载文件
        function downloadFile(content, filename, type) {
            const blob = new Blob([content], { type });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
        
        // 复制文本到剪贴板
        async function copyToClipboard(text) {
            try {
                await navigator.clipboard.writeText(text);
                return true;
            } catch (err) {
                console.error('复制失败:', err);
                return false;
            }
        }
        
        // 下载按钮事件处理
        downloadMdBtn.addEventListener('click', function() {
            // 使用编辑器中的内容而不是原始内容
            const markdown = markdownEditor.value.trim();
            if (!markdown) {
                showStatus('没有可下载的Markdown内容', 'error');
                return;
            }
            
            const filename = `${themeInput.value || 'mindmap'}.md`;
            downloadFile(markdown, filename, 'text/markdown');
            showStatus('Markdown文件已下载', 'success');
        });
        
        downloadFileTreeBtn.addEventListener('click', function() {
            if (!generatedData.fileTree) {
                showStatus('没有可下载的文件树内容', 'error');
                return;
            }
            
            // 创建简单的HTML文件包含文件树
            const htmlContent = `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>文件树: ${escapeHtml(themeInput.value || 'mindmap')}</title>
                <style>
                    body { font-family: "Microsoft YaHei", "SimHei", sans-serif; padding: 20px; }
                    .file-tree { margin: 20px 0; font-family: Consolas, Monaco, monospace; }
                    .file-tree ul { list-style-type: none; padding-left: 20px; }
                    .file-tree li { position: relative; padding: 5px 0; }
                    .file-tree li::before { content: ''; position: absolute; left: -15px; top: 12px; width: 10px; height: 1px; background-color: #999; }
                    .file-tree li::after { content: ''; position: absolute; left: -15px; top: 0; height: 100%; width: 1px; background-color: #999; }
                    .file-tree li:last-child::after { height: 12px; }
                    .file-tree .folder { color: #3498db; font-weight: bold; }
                    .file-tree .file { color: #333; }
                </style>
            </head>
            <body>
                <h1>文件树: ${escapeHtml(themeInput.value || 'mindmap')}</h1>
                ${generatedData.fileTree}
                <hr>
                <p><small>由Deepseek思维导图生成器生成</small></p>
            </body>
            </html>`;
            
            const filename = `${themeInput.value || 'mindmap'}_filetree.html`;
            downloadFile(htmlContent, filename, 'text/html');
            showStatus('文件树已下载', 'success');
        });
        
        downloadMermaidTreeBtn.addEventListener('click', function() {
            if (!generatedData.mermaidTree) {
                showStatus('没有可下载的Mermaid树型图内容', 'error');
                return;
            }
            
            const filename = `${themeInput.value || 'mindmap'}_tree.mmd`;
            downloadFile(generatedData.mermaidTree, filename, 'text/plain');
            showStatus('Mermaid树型图文件已下载', 'success');
        });
        
        downloadMermaidFlowBtn.addEventListener('click', function() {
            if (!generatedData.mermaidFlow) {
                showStatus('没有可下载的Mermaid逻辑图内容', 'error');
                return;
            }
            
            const filename = `${themeInput.value || 'mindmap'}_flow.mmd`;
            downloadFile(generatedData.mermaidFlow, filename, 'text/plain');
            showStatus('Mermaid逻辑图文件已下载', 'success');
        });
        
        downloadMermaidMindmapBtn.addEventListener('click', function() {
            if (!generatedData.mermaidMindmap) {
                showStatus('没有可下载的Mermaid思维导图内容', 'error');
                return;
            }
            
            const filename = `${themeInput.value || 'mindmap'}_mindmap.mmd`;
            downloadFile(generatedData.mermaidMindmap, filename, 'text/plain');
            showStatus('Mermaid思维导图文件已下载', 'success');
        });
        
        // 复制按钮事件处理
        copyMdBtn.addEventListener('click', async function() {
            // 使用编辑器中的内容而不是原始内容
            const markdown = markdownEditor.value.trim();
            if (!markdown) {
                showStatus('没有可复制的Markdown内容', 'error');
                return;
            }
            
            const success = await copyToClipboard(markdown);
            showStatus(success ? 'Markdown已复制到剪贴板' : '复制失败，请手动复制', success ? 'success' : 'error');
        });
        
        copyFileTreeBtn.addEventListener('click', async function() {
            // 复制纯文本版的文件树结构
            const fileTreeText = generateTextFileTree(generatedData.nodes);
            
            if (!fileTreeText) {
                showStatus('没有可复制的文件树内容', 'error');
                return;
            }
            
            const success = await copyToClipboard(fileTreeText);
            showStatus(success ? '文件树已复制到剪贴板' : '复制失败，请手动复制', success ? 'success' : 'error');
        });
        
        // 生成纯文本版文件树
        function generateTextFileTree(nodes) {
            if (nodes.length === 0) return '';
            
            try {
                let result = '';
                const rootNode = nodes[0];
                
                // 添加根节点
                result += `${rootNode.content}\n`;
                
                // 递归添加子节点
                if (rootNode.children && rootNode.children.length > 0) {
                    for (const child of rootNode.children) {
                        result += generateTextFileTreeNode(child, 1);
                    }
                }
                
                return result;
            } catch (error) {
                console.error('生成文本文件树错误:', error);
                return '';
            }
        }
        
        // 递归生成文本文件树节点
        function generateTextFileTreeNode(node, depth) {
            const indent = '  '.repeat(depth);
            let result = `${indent}├── ${node.content}\n`;
            
            if (node.children && node.children.length > 0) {
                for (const child of node.children) {
                    result += generateTextFileTreeNode(child, depth + 1);
                }
            }
            
            return result;
        }
        
        copyMermaidTreeBtn.addEventListener('click', async function() {
            if (!generatedData.mermaidTree) {
                showStatus('没有可复制的Mermaid树型图代码', 'error');
                return;
            }
            
            const success = await copyToClipboard(generatedData.mermaidTree);
            showStatus(success ? 'Mermaid树型图代码已复制到剪贴板' : '复制失败，请手动复制', success ? 'success' : 'error');
        });
        
        copyMermaidFlowBtn.addEventListener('click', async function() {
            if (!generatedData.mermaidFlow) {
                showStatus('没有可复制的Mermaid逻辑图代码', 'error');
                return;
            }
            
            const success = await copyToClipboard(generatedData.mermaidFlow);
            showStatus(success ? 'Mermaid逻辑图代码已复制到剪贴板' : '复制失败，请手动复制', success ? 'success' : 'error');
        });
        
        copyMermaidMindmapBtn.addEventListener('click', async function() {
            if (!generatedData.mermaidMindmap) {
                showStatus('没有可复制的Mermaid思维导图代码', 'error');
                return;
            }
            
            const success = await copyToClipboard(generatedData.mermaidMindmap);
            showStatus(success ? 'Mermaid思维导图代码已复制到剪贴板' : '复制失败，请手动复制', success ? 'success' : 'error');
        });
        
        // 颜色主题更新
        colorThemeSelect.addEventListener('change', function() {
            updateColorTheme(this.value);
        });
        
        // 更新颜色主题
        function updateColorTheme(theme) {
            let colors = {};
            
            switch(theme) {
                case 'pastel':
                    colors = {
                        primary: '#95a5a6',
                        secondary: '#7f8c8d',
                        h1: '#34495e',
                        h2: '#3498db',
                        h3: '#9b59b6',
                        h4: '#1abc9c',
                        h5: '#f1c40f',
                        h6: '#e67e22'
                    };
                    break;
                case 'forest':
                    colors = {
                        primary: '#27ae60',
                        secondary: '#2ecc71',
                        h1: '#145a32',
                        h2: '#196f3d',
                        h3: '#1e8449',
                        h4: '#27ae60',
                        h5: '#2ecc71',
                        h6: '#58d68d'
                    };
                    break;
                case 'sunset':
                    colors = {
                        primary: '#e74c3c',
                        secondary: '#c0392b',
                        h1: '#c0392b',
                        h2: '#d35400',
                        h3: '#e67e22',
                        h4: '#f39c12',
                        h5: '#f1c40f',
                        h6: '#f7dc6f'
                    };
                    break;
                case 'monochrome':
                    colors = {
                        primary: '#333333',
                        secondary: '#555555',
                        h1: '#000000',
                        h2: '#333333',
                        h3: '#555555',
                        h4: '#777777',
                        h5: '#999999',
                        h6: '#bbbbbb'
                    };
                    break;
                default: // default
                    colors = {
                        primary: '#3498db',
                        secondary: '#2980b9',
                        h1: '#2c3e50',
                        h2: '#3498db',
                        h3: '#9b59b6',
                        h4: '#16a085',
                        h5: '#f39c12',
                        h6: '#c0392b'
                    };
            }
            
            // 更新CSS变量
            document.documentElement.style.setProperty('--primary-color', colors.primary);
            document.documentElement.style.setProperty('--secondary-color', colors.secondary);
            
            // 更新标题颜色
            const style = document.createElement('style');
            style.innerHTML = `
                .markdown-preview h1 { color: ${colors.h1}; }
                .markdown-preview h2 { color: ${colors.h2}; }
                .markdown-preview h3 { color: ${colors.h3}; }
                .markdown-preview h4 { color: ${colors.h4}; }
                .markdown-preview h5 { color: ${colors.h5}; }
                .markdown-preview h6 { color: ${colors.h6}; }
            `;
            
            // 移除之前的样式
            const oldStyle = document.getElementById('theme-colors');
            if (oldStyle) {
                oldStyle.remove();
            }
            
            style.id = 'theme-colors';
            document.head.appendChild(style);
        }
        
        // 初始化颜色主题
        updateColorTheme('default');
    </script>
</body>
</html>